<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增加修改</title>
<link rel="stylesheet" href="../../res/layui/css/layui.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form id="form" class="layui-form" action="../../listenMusical/updateorinser.action" method="post" style="margin-top: 10px;" enctype="multipart/form-data">
		<input type="hidden" name="muId" id="muId"/>
		<input type="hidden" name="isva" id="isva"/ value="1">
		
	 	<div class="layui-form-item" style="width:70%;">
	    <label class="layui-form-label">乐器名称:</label>
		    <div class="layui-input-block">
		      <input name="muName" lay-verify="muName" autocomplete="off" placeholder="请输入乐器名称" class="layui-input" type="text" id='muName' >
		    </div>
	  	</div>
	  	
	  	<div class="layui-form-item" style="width:70%;">
	    <label class="layui-form-label">乐器规格:</label>
		    <div class="layui-input-block">
		      <input name="muSpecifications" lay-verify="muSpecifications" autocomplete="off" placeholder="请输入乐器规格" class="layui-input" type="text" id='muSpecifications' >
		    </div>
	  	</div>

		<div class="layui-form-item" style="width:70%;">
	    <label class="layui-form-label">乐器价格:</label>
		    <div class="layui-input-block">
		      <input name="muPrice" maxlength="7" lay-verify="muPrice" autocomplete="off" placeholder="请输入乐器价格" class="layui-input" type="text" id='muPrice' >
		    </div>
	  	</div>
	 
	<div class="layui-form-item" style="width:70%;">
	      <label class="layui-form-label" >乐器类型:</label>
	      <div class="layui-input-block">
	        <select name="mtId" id="mtId"  color="gray" lay-verify="required|types" lay-search="">
	        <option value="">--请选择类型--</option>
	        </select>
	      </div>
	   </div>
	   
	   	<div class="aru">
		  <label class="layui-form-label">乐器图片:</label>
		  <input type="button" class="layui-btn" id="pic" src="" lay-verify="comImage" name="file"  value="上传图片" style="margin-left: 30px;">
		  <img class="layui-upload-img"  id="img" src="" style="margin-left: 100px; width:200px; height:100px;>
		  <input type="hidden"  class="fromYz" id="ImageYz">
	</div>
	   
	 
	  	<br/>
	  	
	  	
	 <br/>
	  <div class="layui-form-item" style="width:50%;">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit lay-filter="formDemo" id="sub" style="margin-left: 30px;">立即提交</button>
	    </div>	
	   </div>
</form>
<script type="text/javascript" src="../../res/layui/layui.js" charset="utf-8"></script>

<script type="text/javascript">
$(function(){
	jQuery.ajaxSettings.async = false;
})
layui.use(['form', 'layedit', 'laydate','upload'], function(){
	  var form = layui.form
	  ,layer = layui.layer
	  ,layedit = layui.layedit
	  ,upload = layui.upload
	  ,laydate = layui.laydate;
	  
	//普通图片上传
	  var uploadInst = upload.render({
	  	elem: '#pic'
	  		,url: '/upload/'
	  			,auto:0
	  			,choose: function(obj){
	  				//预读本地文件示例，不支持ie8
	  				obj.preview(function(index, file, result){
	  					$('#img').attr('src', result); //图片链接（base64）
	  					$("#img").css({"width":"200px","height":"100px"});
	  				});
	  			}
	  });
	  //乐器类型
	  var url="../../listenMusicalType/mutype.action"
	  var data=null;
	  $.post(url,data,function(mes){
			$.each(mes,function(index,item){
				/* alert(item.mtName); */
				 $("#mtId").append("<option value='"+item.mtId+"'>"+item.mtName+"</option>");
				 form.render();
			});
		 },"json");
	  
	//日期
	  laydate.render({
	    elem: '#birthday'
	  });
	
	//创建一个编辑器
	  var editIndex = layedit.build('LAY_demo_editor');
	
	//自定义验证规则
	   form.verify({
		  muName: function(value){
			var a=/^[a-zA-Z\u4e00-\u9fa5]+$/;
	      if(value.length == 0){
	        return '乐器不能为空';
	      }else if(a.test($("#muName").val())){
	    	  
	      }else{
	    	  return '乐器名不能为除字母与中文以外字符';
	      }
	    }
	   
	 	 ,muPrice: function(value){
	 		var a =/^\d*\.{0,1}\d{0,1}$/;
	      if(value.length == 0){
	        return '价格不能为空';
	      }else if(value.length>7){
	    	  return '最大只能支持7位数'
	      }else if(a.test($("#muPrice").val())){
	    	 
	      }else{
	    	  return '不能输入除数字小数点以外其他字符'
	      }
	    }
	   
	    ,muSpecifications: function(value){
		      if(value.length == 0){
		        return '乐器规格不能为空';	
		      }
		    }
	   
	  }); 
	
	  //监听提交
	  form.on('submit(formDemo)', function(data){
		  window.parent.location.reload()
		     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
		     parent.layer.close(index);//关闭当前页  
	  });
});
	


function load() {
	var form = layui.form;
	 form.render();
}
</script>
</body>
</html>